<template>
  <div class="take-notes">
    <div class="note-writer" v-for="note in noteList" :key="note.id" @click="getNoteId(note)">
      <div class="note-img"><img v-lazy="note.images[0]+'?x-oss-process=image/resize,m_mfit,h_405,w_720'" alt="" /></div>
      <p class="note-title">{{ note.title }}</p>
      <div class="note-creator">
        <div class="creator-img">
          <img v-lazy="note.user.avatar" alt="" />
          <span>{{note.user.username}}</span>
        </div>
        <div class="icon-zan">
          <i class="iconfont icon-dianzan"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["noteList"],
  methods:{
    getNoteId(child){
      console.log("note",child.id);
        this.$router.push({ path: "/note",query:{id:child.id} })
     
    },
}
};
</script>

<style lang="less" scoped>
.take-notes {
  column-count:2;
  column-gap:4px;
  padding: 2px;
   
    
  .note-writer {
    width: 100%;
   height: 100%;
     overflow: auto;
  
    .note-img {
      img {
        width: 100%;
      }
    }
    .note-title {
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    
      margin: 0 10px;
      font-size: 15px;
      font-weight: 600;
    }
    .note-creator{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px 8px;
        .creator-img{
            display: flex;
            align-items: center;
     
            img{
                width: 20px;
                border-radius: 50%;
                vertical-align: middle;
            }
            span{
                font-size: 12px;
                color: #555;
                margin-left: 6px;
            }
        }
    }
  }
}
</style>